import React from 'react';

export default class App extends React.Component {
  state={
    count:0
  }
  // 加
  increament=()=>{
    // 1 获取选择框的值
    let selectVal=this.refs.select.value*1
    // console.log(selectVal)
    // 2 获取初始状态
    let count=this.state.count
    // 3 进行计算 改变状态
    this.setState({
      count:count+selectVal
    })
  }
  // 减
  decreament=()=>{
    // 1 获取选择框的值
    let selectVal=this.refs.select.value*1
    // console.log(selectVal)
    // 2 获取初始状态
    let count=this.state.count
    // 3 进行计算 改变状态
    if(count-selectVal<0){
      return
    }else{
      this.setState({
        count:count-selectVal
      })
    }
    
  }
  // 偶数加
  oddment=()=>{
    // 1 获取选择框的值
    let selectVal=this.refs.select.value*1
    // console.log(selectVal)
    // 2 获取初始状态
    let count=this.state.count
    // 3 进行计算 改变状态
    if(count%2===0){
      this.setState({
        count:count+selectVal
      })
    }
    
  }
  // 异步加
  asyncment=()=>{
    // 1 获取选择框的值
    let selectVal=this.refs.select.value*1
    // console.log(selectVal)
    // 2 获取初始状态
    let count=this.state.count
    // 3 进行计算 改变状态
    setTimeout(() => {
      this.setState({
        count:count+selectVal
      })
    }, 1000);
  }
  render(){
    let {count}=this.state
    return (
      <div className="App">
        <p>click {count} times</p>
        <div>
          <select ref='select'>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
          </select>&nbsp;
          <button onClick={this.increament}>+</button>&nbsp;
          <button onClick={this.decreament}>-</button>&nbsp;
          <button onClick={this.oddment}>偶数加</button>&nbsp;
          <button onClick={this.asyncment}>异步加</button>
        </div>
      </div>
    );
  }
}
